<!DOCTYPE html><html lang="en"><head>
  <meta charset="UTF-8">
  <base href="https://jamesfengcao.codeberg.page/en/searchurl/bingAI/">
  <title id="docTitle">Draw</title>
  <link rel="stylesheet" href="./css/DrawImg.css">
  <script>
    function getMagicUrl() {
    let v = localStorage.GoGoUrl;
    if(v && v.startsWith("http")) return v;
    return "https://mybing2.xn--xyza.top/";
    }
    const magicUrl = getMagicUrl();
  </script>
  <script type="text/javascript" src="./js/generateImages.js"></script>
</head>
<body>
<div id="DrawDiv">
  <div id="DrawInputDiv">
    <textarea id="inputDraw" placeholder="Describe your image" ></textarea>
    <input id="startDraw" type="button" value="Draw" onClick="draw()">
  </div>
  <div id="imgs">

  </div>
</div>
<script>
  const inputDraw = document.getElementById('inputDraw');
  const imgsDiv = document.getElementById('imgs');
  async function draw() {
    let text = inputDraw.value;
    try {
      imgsDiv.innerText = `正在生成'${text}'图片，请稍等..`;
      imgs = await generateImages(text,undefined,(v)=>{
        imgsDiv.innerText = `正在生成'${text}'图片，请稍等..${v}`;
      });
    }catch (error){}
    imgsDiv.innerHTML = '';
    imgs.forEach((v)=>{
      let img = document.createElement('img');
      img.src = v.mImg;
      imgsDiv.appendChild(img);
      img.onclick = ()=>{
        window.open(v.img);
      }
      //在低分辨率图片加载完成后替换成高分辨率图片
      img.onload = ()=>{
        img.onload = undefined;
        img.src = v.img;
      }
    });
  }
</script>
</body>
</html>
